<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>时间轴</title>
<link rel="icon" href="https://www.xuhxin.cn/file/%E6%A1%83%E5%BF%83.png">
<link rel="icon" type="text/css" href="https://www.xuhxin.cn/file/%E6%A1%83%E5%BF%83.png">
<script type="text/javascript" src="https://www.xuhxin.cn/file/Personal-home-page/assets/js/shubiao.js"></script>

<style>
    body {
        font-family: Arial, sans-serif;
        background: linear-gradient(to top, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; background-blend-mode: multiply,multiply;
    }
    .timeline {
        position: relative;
        max-width: 25rem;
        margin: 0 auto;
        padding: 2rem;
        list-style: none;
    }
    .timeline-item {
        position: relative;
        margin: 2rem 0;
        box-shadow:15px 15px 8px -12px #000;
    }
    .timeline-item-content {
        background: linear-gradient(to right, #BDBBBE 0%, #9D9EA3 100%), radial-gradient(88% 271%, rgba(255, 255, 255, 0.25) 0%, rgba(254, 254, 254, 0.25) 1%, rgba(0, 0, 0, 0.25) 100%), radial-gradient(50% 100%, rgba(255, 255, 255, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%); background-blend-mode: normal, lighten, soft-light;
        padding: 1rem;
        border-radius: 10px;
        box-shadow: 0 3px 0 #dadada, 0 5px 0 #c1c1c1, 0 7px 0 #bbb, 0 10px 10 -10 #aaa;
    }
    .timeline-item-content:before,
    .timeline-item-content:after {
        content: '';
        position: absolute;
        top: 0;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 0 0 3px #ddd;
    }
    .timeline-item-content:before {
        left: -2rem;
        background: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
    }
    .timeline-item-content:after {
        left: -1rem;
        background: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
    }
    .timeline-date {
        position: absolute;
        left: 0;
        top: 0.2rem;
        color: #201e1e;
        font-size: 1rem;
        text-align: center;
        width: 6rem;
    }
    h3 {
        text-align: center;
    }
    .city {
        position: absolute;
        right: 0;
        top: 0;
        color: #201e1e;
        font-size: 1rem;
        text-align: center;
        width: 6rem;
    }
</style>
</head>
<body>
 
<ul class="timeline">
    <!-- <li class="timeline-item"> -->
      
    </li>
</ul>
<script type="text/javascript">
// 动态生成更多时间轴项的示例代码
const timeline = document.querySelector('.timeline');
const list = []; // 示例年份数组
fetch('./index.json', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    })
    .then(response => {
      if (response.ok) {
        return response.json(); // 将响应数据转换为JSON
      }
      throw new Error('Network response was not ok.');
    })
    .then(jsonData => {
       jsonData.list.forEach(item => {
        const timelineItem = document.createElement('li');
        timelineItem.classList.add('timeline-item');
        
        const timelineDate = document.createElement('div');
        timelineDate.classList.add('timeline-date');
        timelineDate.textContent = item.year + '年' + item.time;

        const timelineItemContent = document.createElement('div');
        timelineItemContent.classList.add('timeline-item-content');
        
        const h3 = document.createElement('h3');
        h3.textContent = item.title + '[' + item.city + ']';
        
        const p = document.createElement('p');
        p.textContent = item.text;
        
        timelineItemContent.appendChild(h3);
        timelineItemContent.appendChild(p);
        
        timelineItem.appendChild(timelineDate);
        timelineItem.appendChild(timelineItemContent);
        
        timeline.appendChild(timelineItem);
    });
    })
    .catch(error => {
      console.error('There has been a problem with your fetch operation:', error);
    });

</script>
<img class="mouse" src="https://www.xuhxin.cn/file/Personal-home-page/123.png" alt="">
<style>
        *{
           margin: 0;
           padding: 0;
           box-sizing:border-box;
           cursor: none;           
       }

       .mouse{
       width: 50px;
       height: 50px;
       border-radius: 50%;;
       position: fixed;
       left: -200px;
       z-index: 1000;
       pointer-events: none;
   }

   </style>
   <script>
        var mouse = document.querySelector('.mouse');
   window.addEventListener('mousemove',function(event){    
       mouse.style.left = event.clientX - mouse.offsetWidth/2 + 'px' ;
       mouse.style.top = event.clientY -mouse.offsetHeight/2 + 'px';       
   })
   </script>
</body>
</html>